<style lang="less">
.modal {
  .modal_overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(43, 43, 43, 0.5);
  }

  .modal-content {
    display: block;
    position: fixed;
    width: 540px;
    background: #ffffff;
    z-index: 1002;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    .modal-title {
      //height: 110px;
      padding-top: 40px;
      padding-bottom: 20px;
      margin-left: 60px;
      color: rgba(49, 49, 49, 1);
      font-size: 36px;
      text-align: justify;
    }

    .modal-title-bind {
      //height: 110px;
      padding-top: 40px;
      padding-bottom: 20px;
      margin-left: 60px;
      color: rgba(49, 49, 49, 1);
      font-size: 28px;
      text-align: justify;
    }
    ul::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0; /*高宽分别对应横竖滚动条的尺寸*/
      height: 0;
    }
    ul::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }
    ul::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 0;
      background: rgba(0, 0, 0, 0);
    }
    ul {
      margin-bottom: 24px;
      max-height: 888px;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;

      li {
        height: 74px;
        line-height: 74px;
        //margin-top: 7px;
        margin-left: 62px;
        .iconfont-li {
          font-size: 18px;
          color: #cfcfcf;
          margin-right: 22px;
        }
        color: rgba(121, 121, 121, 1);

        span {
          font-size: 32px;
          color: rgba(121, 121, 121, 1);
        }

        img {
          width: 26px;
          height: 26px;
        }

        .check-span {
          margin-left: 23px;
        }
        .un-check-span {
          margin-left: 23px;
        }
        border-bottom: 1px solid #f1f1f1;
      }
      li:last-child {
        border: 0;
      }
    }

    .modal-fotter {
      border-top: 1px solid #f2f2f2;
      height: 82px;
      line-height: 82px;
      text-align: center;
      font-size: 32px;
      color: rgba(73, 92, 201, 1);
    }

    .modal-message {
      display: flex;
      align-items: center;
      justify-items: center;
      flex-direction: column;
      .modal-message-title {
        font-size: 36px;
        margin-top: 34px;
        margin-bottom: 30px;
        font-weight: 500;
        color: rgba(49, 49, 49, 1);
      }
      img {
        width: 164px;
        height: 170px;
      }
      .modal-message-desc {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(121, 121, 121, 1);
      }
    }

    .modal-message-border {
      width: 540px;
      height: 2px;
      background: rgba(234, 234, 234, 1);
    }

    .un-check {
      color: #313131;
    }
  }
}
</style>

<template>
  <div class="sel-company-list">
    <div
      v-show="showFlag"
      @tap.stop="hideModal()"
      class="modal"
    >
      <div class="modal_overlay" />
      <div class="modal-content">
        <div
          v-show="isShowMessage && type!='loginPage'"
          class="modal-message"
        >
          <p class="modal-message-title">
            提示
          </p>
          <img src="../../assets/error.png">
          <p class="modal-message-desc">
            您已经达到注册上限了哦！
          </p>
          <div class="modal-message-border" />
        </div>
        <div
          v-show="modalTitle"
          class="modal-title"
        >
          <slot name="modalTitle" />
        </div>
        <div
          v-show="!modalTitle"
          class="modal-title-bind"
        >
          <slot name="modalTitle_bind" />
        </div>
        <div>
          <ul v-show="list">
            <template v-for="(item,index) of list">
              <li
                @tap.stop="selCompany(item,index)"
                :key="index"
              >
                <!-- <img
                  v-show="selIndex==index"
                  src="../../assets/JE-Check-the-01.png"
                  class="check-img"
                >

                <img
                  v-show="selIndex!=index"
                  src="../../assets/JE-circle-01.png"
                  class="un-check-img"
                > -->
                <span :class="[selIndex==index?'check-span':'un-check-span']">{{ item.TEXT | ellipsisStr(11) }}</span>
              </li>
            </template>
          </ul>
        </div>
        <div
          v-show="isShowFotter && type!='loginPage'"
          class="modal-fotter"
        >
          <slot name="modalFotter" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkingUser } from '../../actions/login';

export default {
  name: 'SelCompanyList',
  props: {
    companyList: {
      type: Array,
    },
    type: {
      type: String,
    },
    state: {
      type: Boolean,
      default: true,
    },
    userInfo: {
      type: Object,
    },
    appLogin: {
      type: Object,
    },
    showModalFlag: {
      type: Boolean,
    },
  },
  data() {
    return {
      list: [],
      isShowFotter: false,
      isShowMessage: false,
      selIndex: -1, // 1 设置公司列表没有默认选中项
      modalTitle: true,
      showFlag: false,
    };
  },
  watch: {
    companyList: {
      handler(newVal) {
        this.list = newVal;
        if (this.list.length >= 3) {
          this.isShowMessage = true;
        }
        if (this.list.length < 3 && this.list.length > 0) {
          this.isShowFotter = true;
        }
      },
      deep: true,
    },
    appLogin: {
      handler(newVal) {
        this.appLogin = newVal;
      },
      deep: true,
    },
    showModalFlag(nv) {
      this.showFlag = nv;
    },
  },
  created() {
    this.list = this.companyList;
  },
  mounted() {
    this.modalTitle = !!this.$slots.modalTitle;
    if (this.list.length >= 3) {
      this.isShowMessage = true;
    }
    if (this.list.length < 3 && this.list.length > 0) {
      this.isShowFotter = true;
    }
    window.addEventListener('homeLoaded', () => {
      plus.webview.currentWebview().hide('slide-out-right');
    });
  },
  methods: {
    showModal(list) {
      if (!this.showFlag && (list && list.length <= 1 && list.length > 0)) {
        this.selCompany(list[0], 0);
      } else {
        this.showFlag = !this.showFlag;
      }
    },
    hideModal() {
      setTimeout(() => {
        this.showFlag = false;
        this.$emit('showFlag', this.showFlag);
      }, 500);
    },
    // 选择公司登录
    async selCompany(item, index) {
      setTimeout(async () => {
        this.selIndex = index;
        const params = {
          checkStateId: item.CHECKID,
          proxyId: item.PROXYID,
          userId: item.USERID,
        };
        const res = await checkingUser(params);
        JE.setLSItem('authorization');
        /* if (this.appLogin.code) {
          params = this.appLogin;
        } else if (this.state) {
          params = {
            j_username: this.userInfo.phone,
            j_password: this.userInfo.pwd,
          };
        } else {
          params = {
            dsfCode: this.userInfo.phone,
            phonemumber: this.userInfo.phone,
            loginType: 'PHONE',
            j_code: this.userInfo.validateCode,
          };
        }

        params.j_dept = item.DEPTID || 'default';
        params.clientType = 'MT';
        const res = await fetchLogin(params); */
        if (res.success) {
          JE.setLSItem('authorization', res.obj);
          const loginPhone = this.userInfo.phone || '';
          if (loginPhone) {
            let set;
            if (JE.getLSItem('loginHistory')) {
              set = new Set(JSON.parse(JE.getLSItem('loginHistory')));
            } else {
              set = new Set();
            }
            set.add(loginPhone);
            JE.setLSItem('loginHistory', JSON.stringify(Array.from(set)));
          }
          this.hideModal();
          // this.showFlag = false;
          // this.$emit('showFlag', this.showFlag);
          // 登陆成功后传值给首页 请求接口渲染数据，渲染完成后回传登陆页关闭登陆页
          plus.webview.getLaunchWebview().evalJS('APP.start.openHome()');
          // this.hideModal();
        } else {
          this.showFlag = false;
          mui.toast('登录失败');
        }
      }, 100);
    },
  },
};
</script>
